import React from 'react'
import {connect} from 'react-redux'

// layout
import GoBackLayout from "../../../../layouts/GoBackLayout/GoBackLayout"

// utils
import {log} from "../../../../utils/commonfunc"
// icon
import Default from "../../../../res/images/web/shared/touxiang@2x.png"

// antd
import {List, WhiteSpace, Modal, Toast} from "antd-mobile"
import LocalStorageService from "../../../../utils/LocalStorageService";
import {goBack} from "../../../../utils/goback";
import UploadImage from "../../../../utils/image";
import {uploadVideoReq} from "../../../../apis/goApis";
import {copyToClip} from "../../../../utils/copy";
// fix touch to scroll background page on iOS
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps
if (isIPhone) {
    wrapProps = {
        onTouchStart: e => e.preventDefault(),
    }
}

class InfoMain extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            avatarUpload: false,
        }
    }

    componentDidMount() {
        const userid = localStorage.getItem('userid')
        this.props.fetchUserDetail({uid: userid,})
    }

    cameraUpload = (e) => {
        this.setState({
            avatarUpload: false,
        })
        let _this = this
        const fs = e.target.files
        const uid = LocalStorageService.get('userid')
        const img = fs[0]
        let MAX_SIZE = 100 * 1024
        let imgIns = new UploadImage(img)
        let params = {
            file: img,
            targetSize:MAX_SIZE,
            quality: 1,
            width: 600,
            height: 600,
            fileName: img.name,
        }
        imgIns.zipImage(params).then((file) => {
            let fm = new FormData()
            fm.append('avatar', file)
            fm.append('uid', uid)
            _this.props.doChangeAvatar(fm)
        })
    }

    render() {

        const cameraInput = <div style={{position: 'relative', width: '100%', display: 'block', textAlign: 'center',}} >
            拍照
            <input
                value=''
                type="file"
                capture="camera"
                style={{position: 'absolute', left: 0, top: 0, opacity: 0, height: '100%',}}
                onChange={(e) => this.cameraUpload(e)}
            />
        </div>

        const fileInput = <div style={{position: 'relative', width: '100%', display: 'block', textAlign: 'center',}} >
            相册
            <input
                value=''
                type="file"
                style={{position: 'absolute', left: 0, top: 0, opacity: 0, height: '100%',}}
                onChange={(e) => this.cameraUpload(e)}
            />
        </div>

        const modal = <Modal
            popup
            animationType="slide-up"
            visible={this.state.avatarUpload}
            onClose={() => {
                this.setState({
                    avatarUpload: false,
                })
            }}
        >
            <List>
                <List.Item>
                    {cameraInput}
                </List.Item>
                <List.Item>
                    {fileInput}
                </List.Item>
                <List.Item
                    onClick={() => {
                        this.setState({
                            avatarUpload: false,
                        })
                    }}
                >
                    <div style={{position: 'relative', width: '100%', display: 'block', textAlign: 'center',}} >
                        取消
                    </div>

                </List.Item>
            </List>

        </Modal>


        const {userDetail,} = this.props

        // props
        const {Iconurl, Nickname, Id, Mobile, Viplevel, Gold, Realname,Yqcode} = userDetail

        // utils
        const NavigateTo = path => {
            this.props.history.push(`userinfo/${path}`)
        }

        const changeAvatar = (e) => {
            this.setState({
                avatarUpload: true,
            })
        }

        // template
        const Item = List.Item
        // const avatar = <div style={{width: '40px', height: '40px', background: `url(${Iconurl}) center/cover`}}/>
        const avatar = <img src={!Iconurl.startsWith('#') ? Iconurl : Default} style={{width: '40px', height: '40px', borderRadius: '50%',}} alt=''/>

        return (
            <>
                {modal}
                <GoBackLayout
                    title='个人信息'
                    history={this.props.history}
                >
                    <List>
                        {/*<List.Item>*/}
                        {/*    {vInput}*/}
                        {/*</List.Item>*/}
                        <Item
                            extra={avatar}
                            arrow="horizontal"
                            onClick={changeAvatar}
                        ><span>头像</span></Item>
                        <Item
                            extra={Nickname}
                            arrow="horizontal"
                            onClick={() => {
                                NavigateTo(`nickname`, 'UID 复制成功')
                            }}
                        ><span>昵称</span></Item>
                        <Item
                            extra={Id.split('-').join('').slice(8, 24)}
                            onClick={() => {
                                if (copyToClip(Id)) {
                                    Toast.info('成功复制UID', 1)
                                }
                            }}
                        >UID</Item>
                        <Item
                            onClick={() => {
                                NavigateTo(`yqm`)
                            }}
                            extra={Yqcode}
                            arrow="horizontal"
                        >
                            <span style={{color: 'rgba(250,114,104,1)',}}>邀请码</span>
                        </Item>
                    </List>
                    <WhiteSpace/>
                    <List>
                        <Item
                            extra="修改"
                            arrow="horizontal"
                            onClick={() => {
                                NavigateTo(`password`)
                            }}
                        ><span>密码</span></Item>
                        <Item
                            extra={Mobile}
                            // arrow="horizontal"
                            onClick={() => {
                            }}
                        ><span>手机号</span></Item>
                        <Item
                            extra='邮箱'
                            // arrow="horizontal"
                            onClick={() => {
                            }}
                        ><span>邮箱</span></Item>
                        <Item
                            extra={Realname.length > 0 ? '已验证' : '未验证'}
                            arrow="horizontal"
                            onClick={() => {
                                NavigateTo(`realinfo`)
                            }}
                        ><span>实名认证</span></Item>
                    </List>
                    <WhiteSpace/>
                    <List>
                        {/*<Item*/}
                        {/*    extra={Viplevel}*/}
                        {/*    arrow="horizontal"*/}
                        {/*    onClick={() => {*/}
                        {/*        NavigateTo(`level`)*/}
                        {/*    }}*/}
                        {/*><span>我的等级</span></Item>*/}
                        <Item
                            extra={Gold}
                            arrow="horizontal"
                            onClick={() => {
                                NavigateTo('../wallet')
                            }}
                        ><span>金币</span></Item>
                    </List>
                </GoBackLayout>
            </>

        )

    }
}

const mapStateToProps = (state) => ({
    userDetail: state.user.userdetail,
})
const mapDispatchToProps = ({user: {fetchUserDetail, doChangeAvatar,},}) => ({
    fetchUserDetail: (id) => fetchUserDetail(id),
    doChangeAvatar: (payload) => doChangeAvatar(payload),
})

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(InfoMain)
